'use client';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import TagList from '@/components/TagList';
import Link from 'next/link';
import { searchQuestionVoUsingPost } from '@/api/QuestionApi';

interface Props {
  defaultQuestionList?: API.QuestionVo[];
  defaultTotal?: number;
  defaultSearchParams?: API.QuestionQueryDto;
}

const QuestionTable = (props: Props) => {
  const { defaultQuestionList, defaultTotal, defaultSearchParams = {} } = props;
  const actionRef = useRef<ActionType>();
  const [questionList, setQuestionList] = useState<API.QuestionVo[]>(
    defaultQuestionList || [],
  );
  const [total, setTotal] = useState<number>(defaultTotal || 0);
  const [init, setInit] = useState<boolean>(true);
  /**
   * 表格列配置
   */
  const columns: ProColumns<API.Question>[] = [
    {
      title: '标题',
      dataIndex: 'title',
      valueType: 'text',
      render: (_, record) => {
        return <Link href={`/question/${record.id}`}>{record.title}</Link>;
      },
    },
    {
      title: '标签',
      dataIndex: 'tagList',
      valueType: 'select',
      fieldProps: {
        mode: 'tags',
      },
      render: (_, record) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        return <TagList tagList={record.tagList} />;
      },
    },
  ];
  return (
    <div className="question-table">
      <ProTable<API.Question>
        actionRef={actionRef}
        size={'large'}
        rowKey="key"
        search={{
          labelWidth: 'auto',
        }}
        dataSource={questionList}
        pagination={{
          pageSize: 20,
          total,
          showSizeChanger: false,
        }}
        form={{
          initialValues: defaultSearchParams,
        }}
        request={async (params, sort, filter) => {
          // 首次加载
          if (init) {
            setInit(false);
            if (defaultQuestionList && defaultTotal) {
              return;
            }
          }
          const sortField = Object.keys(sort)?.[0];
          const sortOrder = sort?.[sortField] ?? undefined;
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-expect-error
          const { data, code } = await searchQuestionVoUsingPost({
            ...params,
            sortField,
            sortOrder,
            ...filter,
          } as API.QuestionQueryDto);
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-expect-error
          const newData = data?.records || [];
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-expect-error
          const newTotal = Number(data?.total) || 0;
          setQuestionList(newData);
          setTotal(newTotal);
          return {
            success: code === 20000,
            data: newData,
            total: newTotal,
          };
        }}
        columns={columns}
      />
    </div>
  );
};
export default QuestionTable;
